<!--头部公共部分-->
{include file="common/header" /}
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a>首页</a>
        <a>用户</a>
        <a>
          <cite>家长用户</cite></a>
      </span>
	<a class="layui-btn layui-btn-xs layui-btn-small" style="float:right;margin-top: 10px;"
	   href="javascript:location.replace(location.href);" title="刷新">
		<i class="layui-icon layui-icon-refresh"></i> </a>
</div>
<div id="wodekehu" class="x-body" class="clear:both;">
	<div class="layui-row"
		 style="padding-left:20px;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;">
		<div class="layui-form layui-col-md12 x-so layui-form-pane">
			<div class="layui-input-inline">
				<input type="text" name="username" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline">
				<select name="status">
					<option value="">请选状态</option>
					<option value="1">启用中</option>
					<option value="0">禁用中</option>
				</select>
			</div>
			<div class="layui-input-inline">
				<button class="layui-btn" id="search">
					<i class="layui-icon layui-icon-search"></i>筛选</button>
				<button class="layui-btn layui-btn-danger" id="clear">
					<i class="layui-icon"></i>重置</button>
			</div>
		</div>
	</div>
	<table class="layui-hide" id="LAY_table_user" lay-filter="table"></table>
	<script type="text/html" id="barTable">
		{{# if(d.status == 0){ }}
		<a class="layui-btn layui-btn-xs" style="background-color: #009688" lay-event="check">激活</a>{{# } else { }}
		<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="check">禁用</a>{{# } }}
		<a class="layui-btn layui-btn-xs" style="background-color: #009688" lay-event="reset">密码重置</a>
	</script>
</div>
<!--底部公共部分-->
{include file="common/footer" /}

<script>
	layui.use(['table','element', 'layer', 'laytpl','upload'], function () {
		var $ = layui.$,
			table = layui.table,
			layer = layui.layer,
			element = layui.element,
			upload = layui.upload,
			laytpl = layui.laytpl;
		var loading = layer.load();
		//数据表格 方法级渲染
		var tableIns = table.render({
			elem: '#LAY_table_user',
			url: '{:url("User/parent")}'
			, method: 'POST'
			, height: 315
			, loading: true
			, parseData: function (res) { //res 即为原始返回的数据
				if (res.code === 1) {
					res.code = 0;
				} else {
					res.code = -1;
				}
				return {
					"code": res.code, //解析接口状态
					"msg": res.message, //解析提示文本
					"count": res.data.total, //解析数据长度
					"data": res.data.data //解析数据列表
				};
			},
			cols: [[
				{field: 'username', title: '手机号码', width: 150, align: 'center'
				}, {field: 'name', title: '姓名', width: 150, align: 'center'
				}, {field: 'img', title: '头像', width: 100, align: 'center'
				}, {field: 'status_text', title: '状态', width: 100, align: 'center'
				}, {field: 'last_login', title: '最近登录时间', width: 200, align: 'center'
				}, {field: 'last_ip', title: '最近登陆IP', width: 200, align: 'center'
				}, {fixed: 'right', title: '操作', minWidth: 150, align: 'center', toolbar: '#barTable'}
			]]
			, height: 'full-180'
			, page: true
			, done: function () {
				$("[data-field='id']").css('display','none');
				layer.close(loading);
			}
		});
		//监听工具条
		table.on('tool(table)', function (obj) {
			var data = obj.data; //获得当前行数据
			console.log(data)
			var layEvent = obj.event; //获得 lay-event 对应的值
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			if (layEvent === 'check') {
				var status;
				if (data.status == 0) {
					status = 1;
				} else {
					status = 0;
				}
				//激活与禁用状态改变
				$.post("{:url('User/parent_status')}", {
					id: data.id,
					status: status
				}, function (rJson) {
					if (rJson.code === 1) {
						layer.msg(rJson.msg, {
							time: 2000
						});
						setTimeout(function () {
							location.reload();
						}, 2000)
					} else {
						layer.msg(rJson.msg, {
							icon: 2,
							time: 2000
						});
					}
				}, "json")
			} else if (layEvent === 'reset') {
				//密码重置
				$.post("{:url('User/parent_reset')}", {
					id: data.id
				}, function (rJson) {
					if (rJson.code === 1) {
						layer.msg(rJson.msg, {
							time: 2000
						});
						setTimeout(function () {
							location.reload();
						}, 2000)
					} else {
						layer.msg(rJson.msg, {
							icon: 2,
							time: 2000
						});
					}
				}, "json")
			}
		});
		//搜索项
		$('#search').click(function () {
			var field = {};
			field.status = $('select[name=status] option:selected').val();
			field.status_center = $('select[name=status_center] option:selected').val();
			field.company_id = $('select[name=company_id] option:selected').val();
			field.username = $('input[name=username]').val();
			field.mobile = $('input[name=mobile]').val();
			console.log(field);
			tableIns.reload({
				where: field,
				method: 'POST',
				page: {
					curr: 1 //重新从第 1 页开始
				}
			});
		});//清除
		$('#clear').click(function () {
			$('.layui-form-pane').find('.layui-input-inline').each(function (index, element) {
				$(element).find('input[type=text]').val('');
				$(element).find('select').val('');
			})
			tableIns.reload({
				where: {
					'username': '',
					'company_id': '',
					'status': '',
					'status_center': '',
					'mobile': ''
				},
				page: {
					curr: 1 //重新从第 1 页开始
				}
			});
		});
	});
</script>